<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author FIRE
-->
<template>
  <div >
    <Divider />
    <div style="display: flex;justify-content: space-between;align-items: center;padding: 0 10px 10px;">
      <h3 style="color: red;font-size: 20px;">
        说明：要保证模板存货编码不重复
      </h3>
      <a-button type="primary" @click="handlestep2TableAdd()" >
        <Icon icon="fluent:add-12-filled" /> {{ t('添加模板') }}
      </a-button>
    </div>
    
    <BasicTable @register="registerTable" >
      
      <template #firstColumn="{ record }">
        <a @click="handleForm(record)">
          {{ record.code }}
        </a>
      </template>
    </BasicTable>
    <div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">
      <a-button type="default" @click="customResetFunc()" style="margin-right: 100px;">上一步</a-button>
      <a-button type="primary" @click="customSubmitFunc()">下一步</a-button>
    </div>
    <InputForm @register="registerDrawer" @success="handleSuccess" />
    <ListSelect
          ref="listSelectRef"
          selectType="wecharPriceModelSelect"
          :checkbox="true"
          :selectList="selectListRef"
          @select="handSelect"
          v-show="false"
        />
    <!-- <WecharPriceModelInv @register="registerDrawer2" @success="handleSuccess" />
    <FormImport @register="registerImportModal" @success="handleSuccess" /> -->
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsSettingPricemodelWecharPriceModelUseStepStep2',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import { wecharPriceModelDelete, wecharPriceModelListData } from '/@/api/setting/pricemodel/wecharPriceModel';
  import { wecharPriceModelDisable, wecharPriceModelEnable } from '/@/api/setting/pricemodel/wecharPriceModel';
  import { wecharPriceSystemTreeData } from '/@/api/setting/pricemodel/wecharPriceSystem';
  import { wecharPriceModelInvCheck  } from '/@/api/setting/pricemodel/wecharPriceModelInv';
  import { useGlobSetting } from '/@/hooks/setting';
  import { downloadByUrl } from '/@/utils/file/download';
  import { useDrawer } from '/@/components/Drawer';
  import { useModal } from '/@/components/Modal';
  import { FormProps } from '/@/components/Form';
  import InputForm from './Step2Form.vue';
  import { Divider } from 'ant-design-vue';
  import { ListSelect } from '/@/components/ListSelect';
  // import WecharPriceModelInv from '../wecharPriceModelInv/list.vue';
  // import FormImport from './formImport.vue';
  
  const emit = defineEmits(['next', 'prev']);

  const { t } = useI18n('setting.pricemodel.wecharPriceModel');
  const { showMessage } = useMessage();
  const getTitle = {
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: router.currentRoute.value.meta.title || t('价格模板管理'),
  };
  const listSelectRef = ref<any>(null);
  const selectListRef = ref<any>([]);

  async function customResetFunc() {
    emit('prev');
  }

  async function customSubmitFunc() {
    let arr = await step2Table.getDataSource();
    if(arr.length == 0){
      showMessage('请先添加模板！');
      return;
    }
    emit('next', arr);
    // try {
    //   const values = await validate();
    //   setProps({
    //     submitButtonOptions: {
    //       loading: true,
    //     },
    //   });
    //   setTimeout(() => {
    //     setProps({
    //       submitButtonOptions: {
    //         loading: false,
    //       },
    //     });
    //     emit('next', values);
    //   }, 1500);
    // } catch (error) {
    //   console.error(error);
    // }
  }

  const tableColumns: BasicColumn[] = [
    {
      title: t('模板编号'),
      dataIndex: 'code',
      key: 'a.code',
      sorter: true,
      width: 100,
      align: 'left',
      slot: 'firstColumn',
    },
    {
      title: t('模板名称'),
      dataIndex: 'name',
      key: 'a.name',
      sorter: true,
      width: 200,
      align: 'left',
    },
    {
      title: t('价格体系'),
      dataIndex: 'priceSys.name',
      key: 'a.sys_code',
      sorter: true,
      width: 150,
      align: 'left',
    },
    {
      title: t('模板说明'),
      dataIndex: 'remarks',
      key: 'a.remarks',
      sorter: true,
      width: 200,
      align: 'left',
    },
    // {
    //   title: t('创建时间'),
    //   dataIndex: 'createDate',
    //   key: 'a.create_date',
    //   sorter: true,
    //   width: 130,
    //   align: 'center',
    // },
    // {
    //   title: t('创建人'),
    //   dataIndex: 'createByName',
    //   key: 'a.create_by_name',
    //   sorter: true,
    //   width: 80,
    //   align: 'left',
    // },
    // {
    //   title: t('状态'),
    //   dataIndex: 'status',
    //   key: 'a.status',
    //   sorter: true,
    //   width: 80,
    //   align: 'center',
    //   dictType: 'sys_search_status',
    // },
    
    
  ];

  const actionColumn: BasicColumn = {
    width: 100,
    actions: (record: Recordable) => [
      {
        icon: 'ant-design:table-outlined',
        // color: 'success',
        title: t('查看价格模板明细'),
        onClick: handleTable.bind(this, record),
        auth: 'setting:pricemodel:wecharPriceModel:edit',
      },
      {
        icon: 'ant-design:delete-outlined',
        color: 'error',
        title: t('删除价格模板'),
        popConfirm: {
          title: t('是否确认删除价格模板'),
          confirm: handleDelete.bind(this, { code: record.code }),
        },
        auth: 'setting:pricemodel:wecharPriceModel:edit',
      },
    ],
  };

  function handlestep2TableAdd() {
    selectListRef.value = [];
    listSelectRef.value.openSelectModal();
  }

  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerDrawer2, { openDrawer:openDrawer2 }] = useDrawer();
  const [registerTable, step2Table] = useTable({
    // api: wecharPriceModelListData,
    // beforeFetch: (params) => {
    //   return params;
    // },
    columns: tableColumns,
    actionColumn: actionColumn,
    // formConfig: searchForm,
    showTableSetting: false,
    useSearchForm: false,
    ellipsis:false,
    canResize: true,
    resizeHeightOffset:80,
    pagination: false,
    rowKey: 'code',
    // rowSelection: {
    //   type: 'checkbox',
    // },
  });

  function handleForm(record: Recordable) {
    openDrawer(true, record);
  }

  // 表格弹窗
  function handleTable(record: Recordable) {
    openDrawer(true, record);
  }


  async function handleEnable(record: Recordable) {
    const res = await wecharPriceModelEnable(record);
    showMessage(res.message);
    handleSuccess();
  }

  async function handleDelete(record: Recordable) {
    await step2Table.deleteTableDataRecord(record);
    // const res = await wecharPriceModelDelete(record);
    // showMessage(res.message);
    // handleSuccess();
  }

  function handSelect(selectData) {
    selectData.forEach((item) => {
          let flag = true;
          step2Table.getDataSource().forEach((res) => {
            if (res.code == item.code) {
              flag = false;
            }
          });
          if (flag) {
            step2Table.insertTableDataRecord({
              ...item,
            });
          }
        });
    }

  function handleSuccess() {
    reload();
  }

  const [registerImportModal, { openModal: importModal }] = useModal();

  function handleImport() {
    importModal(true, {});
  }
</script>
